<ui:composition template="/WEB-INF/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
	<ui:composition template="/templates/menu-template.xhtml">
		<ui:define name="title">
			<h:outputText value="#{msg.transacciones}" />
		</ui:define>
		<ui:define name="content">
			<a4j:form id="form">
				<rich:panel>
					<a4j:keepAlive beanName="beanTx" />
					<f:facet name="header">
						<h:outputText value="#{msg.filtrarBusqueda}" id="find" />
					</f:facet>
					<h:panelGrid columns="5" id="filterGrid">
						<h:panelGrid columns="2" id="panelFilter1">
							<h:outputText value="#{msg.fecha}" id="outputDate" />
							<rich:calendar value="#{beanTx.buscarFecha}" id="calendar"
								datePattern="#{beanTx.pattern}" />
							<h:outputText value="#{msg.estatus}" id="outputStatus" />
							<h:selectOneMenu value="#{beanTx.buscarEstatus}"
								style="width: 134px;" id="oneMenu">
								<f:selectItem itemLabel="Selecciona......." itemValue="" />
								<f:selectItem itemLabel="Aprobada" itemValue="Aprobada" />
								<f:selectItem itemLabel="Declinada" itemValue="Declinada" />
							</h:selectOneMenu>
						</h:panelGrid>
						<h:panelGrid columns="2" id="panelFilter2">
							<h:outputText value="#{msg.monto}" id="outputAmount" />
							<h:inputText value="#{beanTx.buscarMonto}" id="inputAmount">
								<f:validateLength maximum="7" />
							</h:inputText>
							<h:outputText value="#{msg.noAut}" id="outputNoAut" />
							<h:inputText value="#{beanTx.buscarNoAut}" id="inputNoAut">
								<f:validateLength maximum="6" />
							</h:inputText>
						</h:panelGrid>
						<h:panelGrid columns="2" id="panelFilter3">
							<h:outputText value="#{msg.noTarjeta}" id="outputPan" />
							<h:inputText value="#{beanTx.buscarPan}" id="inputPan">
								<f:validateLength maximum="16" />
							</h:inputText>
						</h:panelGrid>
						<h:panelGrid columns="1" id="panelFilter4">
							<a4j:commandButton id="filtrarBusqueda"
								reRender="table,filterGrid" action="#{beanTx.searchQuery}"
								value="#{msg.filtrar}" />
						</h:panelGrid>
						<h:panelGrid columns="1" id="panelFilter5">
							<rich:messages ajaxRendered="true" layout="list" id="message"
								style="font-size:14px;font-family:Arial;color:red;" />
						</h:panelGrid>
					</h:panelGrid>
					<rich:spacer height="20px" id="spacer" />
					<rich:extendedDataTable value="#{beanTx.listItems}" var="item"
						id="table" rows="10" reRender="datascroller" width="100%"
						style="margin-left: auto; margin-right: auto;text-align: center;">
						<rich:column id="fechaColumn" label="#{msg.fecha}" width="17%">
							<f:facet name="header">
								<h:outputText value="#{msg.fecha}" id="dateItem" />
							</f:facet>
							<h:outputText value="#{item.dateTimeTx}" id="dateValue" />
						</rich:column>
						<rich:column id="estatusColumn" label="#{msg.estatus}" width="17%">
							<f:facet name="header">
								<h:outputText value="#{msg.estatus}" id="statusItem" />
							</f:facet>
							<h:outputText value="#{item.status}" id="statusValue" />
						</rich:column>
						<rich:column id="montoColumn" label="#{msg.monto}" width="17%">
							<f:facet name="header">
								<h:outputText value="#{msg.monto}" id="amountItem" />
							</f:facet>
							<h:outputText id="amountValue" value="#{item.amount}">
								<f:convertNumber type="currency" currencySymbol="$"
									groupingUsed="true" minFractionDigits="2" maxFractionDigits="2" />
							</h:outputText>
						</rich:column>
						<rich:column id="noAutColumn" label="#{msg.noAut}" width="17%">
							<f:facet name="header">
								<h:outputText value="#{msg.noAut}" id="noAutItem" />
							</f:facet>
							<h:outputText value="#{item.noAut}" id="noAutValue" />
						</rich:column>
						<rich:column id="panColumn" label="#{msg.noTarjeta}" width="17%">
							<f:facet name="header">
								<h:outputText value="#{msg.noTarjeta}" id="panItem" />
							</f:facet>
							<h:outputText value="#{item.pan}" id="panValue" />
						</rich:column>
						<rich:column width="16.5%" id="acciones" label="#{msg.acciones}">
							<f:facet name="header">
								<h:outputText value="#{msg.acciones}" id="outputAccions" />
							</f:facet>

							<a4j:commandLink ajaxSingle="true" id="enviarLink"
								action="#{beanTx.sendReceipt}">
								<h:graphicImage value="/static/images/mail.png"
									style="border: 0" id="graphicImage" />
								<f:setPropertyActionListener target="#{beanTx.currentItem}"
									value="#{item}" />
							</a4j:commandLink>
							<rich:toolTip for="enviarLink" value="#{msg.enviar}"
								id="enviarToolTip" />

							<a4j:commandLink ajaxSingle="true" id="generarLink"
								action="#{beanTx.showReceipt}">
								<h:graphicImage value="/static/images/pdf.png" style="border: 0" />
								<f:setPropertyActionListener target="#{beanTx.buscarPan}"
									value="#{item.noAut}" />
							</a4j:commandLink>
							<rich:toolTip for="generarLink" value="#{msg.generar}"
								id="generaToolTip" />
						</rich:column>
						<f:facet name="footer">
							<rich:datascroller id="datascroller" renderIfSinglePage="false" />
						</f:facet>
					</rich:extendedDataTable>
				</rich:panel>
			</a4j:form>
		</ui:define>
	</ui:composition>
</ui:composition>